<!-- 国家地区增改弹窗 -->

<style lang="scss" scoped>
.scrollbar {
  margin-bottom: 30px;
  height: calc(100vh - 150px);

  ::v-deep {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}

::v-deep .interface-item {
  padding-right: 20px;
  width: 100%;
  display: flex;
  align-items: center;

  .interface-method {
    margin-left: 20px;
    color: #1890ff;
  }

  .api-status {
    margin-right: 5px;
    padding-bottom: 1px;

    color: #ccc;

    &.enabled {
      color: #13ce66;
    }
  }
}
</style>

<template>
  <el-drawer
    ref="drawer"
    custom-class="hjd-drawer"
    title="分配接口"
    size="800px"
    :visible.sync="showDialog"
    :wrapper-closable="true"
    @close="$emit('update:visible', false)"
  >
    <div>
      <el-scrollbar class="scrollbar">
        <el-tree
          ref="tree"
          :data="list"
          :props="defaultProps"
          :default-checked-keys="checkedKeys"
          :render-content="renderContent"
          node-key="api_id"
          show-checkbox
          default-expand-all
        />
      </el-scrollbar>

      <div class="hjd-drawer__footer">
        <el-button @click="showDialog = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>

import _ from 'lodash'

import { apiList } from '@/api/api'
import { role } from '@/api/member/app'

export default {
  name: 'SetInterfacePrice',
  props: {
    visible: {
      type: Boolean,
      default: false
    },

    data: {
      type: Object,
      default: () => ({})
    }
  },

  data() {
    return {
      showDialog: this.visible,

      list: [],
      checkedKeys: [],

      defaultProps: {
        label: 'api_title',
        value: 'api_id'
      }
    }
  },

  watch: {
    visible(val) {
      this.showDialog = this.visible

      if (val) {
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(_.split(this.data.api_role, ','))
        })
      }
    }
  },

  created() {
    if (this.list.length === 0) {
      apiList().then(res => {
        this.list = res.data
      })
    }
  },

  methods: {
    submit() {
      const checked = this.$refs.tree.getCheckedNodes()

      const api_ids = _.map(checked, item => item.api_id)

      role({
        appkey: this.data.app_key,
        uid: this.data.uid,
        api_role: api_ids
      }).then(() => {
        this.$message.success('设置成功')
        this.data.api_role = api_ids.join(',')
        this.showDialog = false
      })
    },

    renderContent(h, { data }) {
      return (
        <div class='interface-item'>
          {
            data.interface === 1 ? <div class={
              data.status === 1
                ? 'api-status enabled' : 'api-status'
            }>●</div> : ''
          }
          <div>{data.api_title}</div>
          <div class='interface-method'>
            {data.api_method}
          </div>
        </div>)
    }
  }
}
</script>
